<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>作业1</title>

    <style>
      #pages {
        user-select: none;
        background-color: #f5f5f6;
        padding: 5px;
      }
      #pages > span {
        color: #36d;
        background-color: white;
        border-radius: 3px;
        width: 40px;
        line-height: 40px;
        text-align: center;
        display: inline-block;
        margin-right: 5px;
      }

      #pages > span:hover {
        background-color: rgba(78, 110, 242, 0.7);
        color: white;
      }
      #pages > span.cur {
        background-color: #36d;
        color: white;
      }
    </style>
  </head>
  <body>
    <!-- 制作套路: HTML -> CSS -> JS切换 -->
    <div id="pages">
      <span class="cur">1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
      <span>5</span>
    </div>

    <script>
      // 查出 #pages 下的所有 span 标签, 遍历挨个添加点击事件
      const pages = document.getElementById('pages')

      for (const page of pages.children) {
        page.onclick = function () {
          console.log(this)
          // 1. 把之前带 cur 样式的元素删除cur样式
          const cur = pages.getElementsByClassName('cur')[0]
          console.log(cur)
          cur.classList.remove('cur')
          // 2. 为当前点击项添加cur样式
          this.classList.add('cur')
        }
      }
    </script>
  </body>
</html>
